<template>
  <div id="components-table-demo-size">
    <a-card class="card" :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form-model :model="form" @submit="queryByName">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-model-item label="姓名">
                <a-input
                  placeholder="请输入姓名"
                  v-model="queryParam.name"/>
                <a-button type="primary" html-type="submit">查询</a-button>
                <a-button style="margin-left: 8px" @click="resetQuery">重置</a-button>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <div class="table-operator">
        <a-button v-action:add type="primary" icon="plus" @click="toAdd()">增加</a-button>
      </div>
      <div class="table">
        <a-table :columns="columns" :dataSource="data" size="middle" :loading="loading" rowKey="id">
          <template slot="action" slot-scope="text,record">
            <span slot="action">
              <a v-action:get @click="() => goShow(record.id)">查看</a>
              <a-divider type="vertical" />
              <a-dropdown>
                <a-menu slot="overlay">
                  <a-menu-item><a v-action:update @click="() => goEdit(record.id)">编辑</a></a-menu-item>
                  <a-menu-item><a v-action:delete class="delete" @click="() => del(record)">删除</a></a-menu-item>
                </a-menu>
                <a>更多<a-icon type="down"/></a>
              </a-dropdown>
            </span>
          </template>
        </a-table>
      </div>
    </a-card>
  </div>
</template>

<script>
import { getDoctor, delDoctor, getByName } from '../../api/doctor'
import { doctorLevelFilter, departmentFilter } from '@/dictionary'

const columns = [{
  title: '姓名',
  dataIndex: 'name',
  align: 'center',
  scopedSlots: { customRender: 'name' }
}, {
  title: '年龄',
  dataIndex: 'age',
  align: 'center',
  scopedSlots: { customRender: 'age' }
}, {
  title: '性别',
  dataIndex: 'gender',
  align: 'center',
  scopedSlots: { customRender: 'gender' },
  customRender: (gender) => gender ? '女' : '男'
},
// {
//   title: '证件类型',
//   dataIndex: 'carType',
//   scopedSlots: { customRender: 'carType' },
//   customRender: carTypeFun
// }, {
//   title: '证件号',
//   dataIndex: 'carId',
//   scopedSlots: { customRender: 'carId' }
// },
{
  title: '电话号码',
  dataIndex: 'phone',
  align: 'center',
  scopedSlots: { customRender: 'phone' }
}, {
  title: '所属部门',
  dataIndex: 'department',
  align: 'center',
  scopedSlots: { customRender: 'department' },
  customRender: departmentFilter
}, {
  title: '职级',
  dataIndex: 'level',
  align: 'center',
  scopedSlots: { customRender: 'level' },
  customRender: doctorLevelFilter
}, {
  title: '操作',
  dataIndex: 'action',
  scopedSlots: { customRender: 'action' },
  align: 'center'
}]

const data = []

export default {
  name: 'DoctorIndex',
  data () {
    return {
      data,
      columns,
      loading: true,
      user: this.$store.getters.userInfo,
      form: this.$form.createForm(this),
      queryParam: {
        id: null,
        name: ''
      }
    }
  },
  methods: {
    queryByName (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('queryParm', this.queryParam)
          getByName(this.queryParam.name).then(res => {
            this.data = res.result // 后台数据给到data ，data是表的数据源
            console.log('res data', this.data)
          }).catch(res => {
            console.log(res)
          })
        }
      })
    },
    toAdd () {
      this.$router.push('/doctor/add')
    },
    goEdit (id) {
      this.$router.push('/doctor/edit?id=' + id)
    },
    goShow (id) {
      this.$router.push('/doctor/show?id=' + id) // doctor/show?id=1
    },
    del (row) {
      const _this = this
      this.$confirm({
        title: '警告',
        content: `真的要删除 ${row.name} 吗?`,
        okText: '删除',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          const index = _this.getArrayIndex(_this.data, row)
          delDoctor(row.id).then(res => {
            console.log('delete:', row)
            _this.data.splice(index, 1)
          }).catch(res => {})
        },
        onCancel () {}
      })
    },
    getArrayIndex (arr, obj) {
      let i = arr.length
      while (i--) {
        if (arr[i] === obj) {
          return i
        }
      }
      return -1
    },
    getData () {
      getDoctor(null, this.user.department).then(res => {
        this.data = res.result
        this.loading = false
        console.log('res', res)
      }).catch(res => {
        console.log('doctor-res', res)
        this.loading = false
      })
    },
    resetQuery () {
      this.queryParam.id = null
      this.queryParam.name = ''
      this.getData()
    }
  },
  created () {
    this.getData()
  }

}
</script>
<style scoped>
  .table {
    margin-top: 14px;
  }
</style>
